<template>
	<view class="my-bill-detail">
	
		<view style="padding: 20rpx;">
		
			<view class="list-wrapper">
				<view class="list-title">
					<view class="title-item">租期</view>
					<view style="width: 1px;height: 72rpx;background: #F5F7FA;"></view>
					<view class="title-item">租金</view>
				</view>
			
				<view v-for="(item, index) in orderInfo.bill.list" class="item">
					<view class="left">
						<view>第{{item.stage}}期</view>
						<view style="margin-top: 8rpx;">{{item.end_time}}</view>
					</view>
					<view style="width: 1px;height: 100%;background: #F5F7FA;"></view>
					<view class="right">
						¥{{item.stage_price}}
					</view>
				</view>
			</view>
		
		</view>
		
		
		
	</view>
</template>

<script>
	import couponListWindow from '@/components/couponListWindow';
	import {
		getOrderDetail,
		getStageBillList,
	} from '@/api/order.js';
	export default {
		components: {
			couponListWindow	
		},
		data() {
			return {
				rentInfo: {},
				orderInfo: {},
				order_id: '',
				o_id: '',
				orerInfo: {},
				wait_list: [],
			};
		},
		onLoad(options) {
			const that = this
			const orderInfo = uni.getStorageSync('billOrder')
			that.$set(that, 'orderInfo', orderInfo);
		},
		onReady() {
			// this.getServerData();
		},
		methods: {
			// getServerData() {
			//     const that = this
			// 	getOrderDetail(this.order_id).then(res => {
			// 		that.$set(that, 'orderInfo', res.data);
			// 	})
			// 	getStageBillList(this.o_id).then(res => {
			// 		that.$set(that, 'rentInfo', res.data);
			// 		that.opts.title.name = res.data.rent_price;
			// 		that.wait_list = that.rentInfo.wait_list
			// 	})
			// },
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.list-wrapper {
		border-radius: 16rpx;
		border: 1px solid #F5F7FA;
		
		.list-title {
			display: flex;
			flex-direction: row;
			background: #FAFAFA;
			
			.title-item {
				flex: 1;
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
		}
		
		.item {
			height: 128rpx;
			border-top: 1px solid #F5F7FA;
			display: flex;
			flex-direction: row;
			
			.left {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
			
			.right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #1F1F1F;
			}
			
		}
	}
	
	
	
</style>